<template>
	<view>
		<view class="goods-list">
			<view class="goods-title">宝贝相册</view>
			<view class="goods-item" v-for="item in goodsList">
				<!-- 商品图片 -->
				<view ><image class="goods-img"   :src="item.goodsPicture" ></image></view>
				<!-- 商品名称 -->
				<view class="goods-desc"><text>{{item.goodsName}}</text></view>
				<!-- 商品价格 -->
				<view class="goods-price">
					<view class="price"><text>¥{{item.goodsPrice}}</text></view>
					<view><button class="btn" @click="toBuy(item)">订购相册</button></view>
				</view>
				
			</view>
			
		</view>
		
		<view>我的宝贝</view>
		
		<view class="content">
			<view class="title">
				<image src="/static/index/camera.png" class="img-loge"></image>
				<span class="titletext">照片墙</span>
			</view>
			
			<!-- 购买过的照片 -->
			<view class="pictureList" v-for="(item,index) in pictureList" :class="pictureIdList.includes(item.id)? 'img1':'img2'">
				<view>
					<image style="width: 100%;" :src="item.pictureUrl"  class="img" @click="showViewer(item)"></image>
				</view>
				<view class="suo-ys">
					<view class="suo style2">
						<image  src="../../static/me/套餐-锁小.png" class="img-suo" ></image>
					</view>
				</view>
				
			</view>
			<!-- 未购买的照片 -->
			<view class="pictureList1" v-for="(item,index) in pictureList" :class="pictureIdList.includes(item.id)? 'img2':'img1'">
				
				<view>
					<image style="width: 100%;" :src="item.pictureUrl"  class="img" @click="showViewer(item)"></image>
				</view>
				<!-- <view class="suo-ys">
					<view class="suo" :class="pictureIdList.includes(item.id)? 'style2':'style1'">
						<image  src="../../static/me/套餐-锁小.png" class="img-suo" ></image>
					</view>
				</view> -->
				<view class="suo-ys">
					<view class="suo" v-if="unlockIndex==0" :class="pictureIdList.includes(item.id)? 'style2':'style1'">
						<image  src="../../static/me/套餐-锁小.png" class="img-suo" ></image>
					</view>
					
					<view class="suo" v-if="unlockIndex==1" :class=" 'style2'">
						<image  src="../../static/me/套餐-锁小.png" class="img-suo" ></image>
					</view>
				</view>
				
			</view>
			
		</view>
		<view style="height:150rpx;">
			<view-tabbar :current="1"> </view-tabbar>
		</view>
	</view>
</template>

<script>

    import tab from "@/components/parent-tabbar/parent-tabbar.vue"
	export default {
		components:{
			'view-tabbar': tab
		},
	
		data() {
			return {
				//商品列表
				goodsList:[],			
				pictureList:[],
				parentId:null,
				studentId:null,
				pictureIdList:[],
				userVxid: '',
				//是否解锁所有底片
				unlockIndex:0,
			}
		},
		onShow() {
		   uni.hideTabBar({
			animation: false
		   })
		  },
		onLoad() {
			// uni.switchTab({
			// 	url:"/pages/index/index"
			// })
			this.getParentIdAndStudentId()
			this.getGoodsList()
			
			uni.$on('photoUpdate',()=>{
				this.getPictureList()
				this.getCheckPictureList(this.studentId,this.parentId)
				this.isUnlockAllPic()
				
			})
			
		},
		methods: {
			getParentIdAndStudentId(){
				
				//微信id存在，则家长id一定存在，从缓存中获取家长id
				this.parentId =  uni.getStorageSync("parentId")
				uni.$api.studentFindAllByParentId(this.parentId).then(result => {
					if(result[0]==null){
						this.isNewParent = true //则显示“您还没有关联宝贝”
					}else{
						this.studentId = result[0].id //给studentid赋值（赋根据家长id拿到学生列表的第一个，燕妮说的）
						this.getPictureList()
						this.getCheckPictureList(this.studentId,this.parentId)
						this.isUnlockAllPic()
					}
				})
				
			},

			//点击购买
			toBuy(goodsInfo){
				//跳转页面, 传递参数
				let goods = goodsInfo
				uni.$common.navigateTo("/subpkg/baby/tobuy/tobuy",{
					goodsInfo:encodeURIComponent(JSON.stringify(goodsInfo))	
				})		
			},
			
			//获取已选照片列表
			getCheckPictureList(studentId,parentId){
				
				uni.$api.appBillPicFindList(studentId,parentId).then(result =>{
					this.pictureIdList = result
				})
			},
			//获取商品列表
			getGoodsList(){
				uni.$api.goodsFindAllByList().then(result =>{
					this.goodsList = result
				})
			
			},
			//获取照片列表
			getPictureList(){
				uni.$api.appPictureFindByStudentId(this.studentId).then(result =>{
					this.pictureList = result
				
				})
			},
			
			//是否解锁所有底片
			isUnlockAllPic(){
				uni.$api.isUnlockAllPic(this.studentId,this.parentId).then(result =>{	
					if(result > 0){
						//解锁所有
						this.unlockIndex = 1
					}else{
						//未解锁所有
						this.unlockIndex = 0
					}
				})
			},
			//点击预览图片
			showViewer(current){
				let picurl = []
				picurl.push(current.pictureUrl)
				let picId = current.id

				if((this.pictureIdList.includes(picId) && this.unlockIndex==0) ||this.unlockIndex==1){
					uni.previewImage({
						// urls:this.pictureList.map(v => v.pictureUrl),
						urls:picurl,
						//current: current.pictureUrl,
					})
				}else{
					uni.showModal({
						content:"订购本学期成长记忆服务，下载全部高清底片，现在就去订购吧。",
						success:function(res){
							if(res.confirm){
								uni.switchTab({
									url: '/pages/baby/baby'
								})
							}
							else if(res.cancel){
							}
						}
					})
				}
			},
		},
	}
</script>

<style>
	/* 宝贝相册标题 */
	.goods-title{
		/* border: 1rpx solid yellow; */
		background-color: white;
		font-size: 35rpx;
		font-weight: 550;
		letter-spacing:4rpx;
		padding: 15rpx 25rpx;
	}
	.suo-ys{
			width: 45rpx;
			height: 20rpx;
		}
	.goods-item{
		background-color: white;
		margin-bottom: 15rpx;
		padding: 0 25rpx 0 25rpx ;
	}
	/* 商品图片 */
	.goods-img{
		width: 700rpx;
		height: 370rpx;
		border-radius: 30rpx;
	}
	/* 商品描述 */
	.goods-desc{
		/* border: 1rpx solid blue; */
		font-size: 26rpx;
		margin: 20rpx 0;
	}
	.goods-price{
		height: 100rpx;
		width: 100%;
		/* border: 1rpx solid red; */
		display: block;
	}
	/* 价格 */
	.price{
		 height: 100rpx;
		 width: 20%;
		 line-height: 100rpx;
		 float: left;
		 color: red;
		 
	}
	/* 订购相册 */
	.btn{
		float: right;
		height: 50rpx;
		line-height: 50rpx;
		width: 160rpx;
		font-size: 24rpx;
		margin: 30rpx 20rpx;
		border-radius: 25rpx;
		color: white;
		background-color: #F5C046;
		border: 0;
		
	}
	.suo{
		width: 45rpx;
		height: 45rpx;
		position:relative;
		top:-200rpx;
		left: 25rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		padding-left: 8rpx;
	}
	.style1{
		display: block;
	}
	.style2{
		display: none;
	}
	.pictureList{
		width: 45%;
		display: inline-block;
		position: relative;
		margin-left: 25rpx;
		margin-top: 0rpx;
	}
	.pictureList1{
		width: 45%;
		display: inline-block;
		position: relative;
		margin-left: 25rpx;
	}
	.img1{
		display: inline-block;
		
	}
	.img2{
		display: none;
	}
	.img{
		/* widthFixs: 100%; */
		height: 210rpx;
		border-radius: 20rpx;
	}
	.img-suo{
		width: 30rpx;
		height: 30rpx;
	}
	
	

	
	.img-loge{
		width: 30px;
		height: 30px;
		display: inline-block;
		vertical-align: middle;
		
	}
	.title{
		text-align: center;
	}
	.titletext{
		display: inline-block;
		line-height: 50px;
		padding-left: 10px;
		vertical-align: middle;
		color: #e3bb41;
		font-size: 20px;
		font-weight: bold;
	}

</style>
